<template>
  <div class="privilege-container">
    <el-tree
      highlight-current
      default-expand-all
      ref="tree"
      :data="allResources"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[]"
      :default-checked-keys="checkedResources"
      @check-change="checkChangeHandle"
      :props="defaultProps">
    </el-tree>
  </div>
</template>

<script>
  import {listAllWithRoleChecked} from '@/api/resource'

  export default {
    props: {
      roleId: {
        type: String,
      }
    },
    name: 'privilegeGrant',
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        checkedNow: '',
        checkedResources: [],
        allResources: []
      }
    },
    created() {
      this.listAllWithRoleChecked()
    },
    methods: {
      listAllWithRoleChecked() {
        console.log("修改角色id的权限:", this.roleId)
        let id = this.roleId;
        if (!id) {
          id = "0"
        }
        listAllWithRoleChecked(id).then(response => {
          console.log("获取到所有权限:", response.data)
          this.allResources = response.data
          this.allResources.forEach((itemRoot) => {
            this.pushCheckedFlag(itemRoot)
          })
        })
      },
      pushCheckedFlag(itemMenu) {
        if (itemMenu.children) {
          itemMenu.children.forEach(item => {
            this.pushCheckedFlag(item)
          })
        } else {
          if (itemMenu.isChecked === true)
            this.checkedResources.push(itemMenu.id)
        }
      },
      getResourceByPkey(itemMenu, pkey) {
        console.log("进入递归入口", itemMenu.name, itemMenu.pkey, pkey)
        let result = {name: '没有东西'}
        let arr = itemMenu.children;
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            const item = arr[i];
            console.log("forItemAll", item.name, item.pkey, pkey)
            if (item.pkey === pkey) {
              console.log("匹配成功", item)
              return item
            } else {
              console.log("匹配失败:", item.name, item.pkey, pkey)
            }
            if (item.children) {
              result = this.getResourceByPkey(item, pkey)
              if (result) {
                return result;
              } else {
                console.log("匹配失败继续递归返回undefined", item, result)
              }
            }
          }
        }
        // else {
        //   console.log("nochildrenpkeyitem:", itemMenu, pkey)
        //   if (itemMenu.pkey === pkey) {
        //     result = itemMenu;
        //     return result
        //   } else {
        //     return result
        //   }
        // }
      },
      checkChangeHandle(data, s, c) {
        if (s) {
          const reg = /Edit$/
          if (reg.test(data.pkey)) {
            let nameDetail = data.pkey.replace("Edit", '') + "Detail"
            console.log("选中修改", data, nameDetail, this.allResources)
            const detailItem = this.getResourceByPkey(this.allResources[0], nameDetail);
            console.log("选中修改详情为", detailItem)
            if (detailItem) {
              this.$refs.tree.setChecked(detailItem.id, true)
            }
          }
        }
      }
      ,
      getAllCheckedKeys() {
        return this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())
      }
    }
  }
</script>

<style scoped>
  .privilege-container {
    position: relative;
    border: #0a76a4 solid 1px;
    height: 400px;
    overflow-y: scroll;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 20px;
  }
</style>

